import {Column} from '@ant-design/plots';
import React from 'react';

const DemoColumn = ({
                      data
                    }: any) => {
  const config = {
    data,
    xField: 'type',
    yField: 'value',
    axis: {
      x: {
        labelFill: '#fff',
      },
      y: {
        labelFill: '#fff',
      },
    },
    style: {
      fill: ({type}: any) => {
        if (type === '10-30分' || type === '30+分') {
          return '#22CBCC';
        }
        return '#2989FF';
      },
    },
    label: {
      text: (originData: any) => {
        const val = parseFloat(originData.value);
        if (val < 0.05) {
          return (val * 100).toFixed(1) + '%';
        }
        return '';
      },
      offset: 10,
    },
    legend: false,
  };
  return <Column height={240} margin={0} padding={30} {...config} />;
};

export default DemoColumn
